<template>
  <!-- 对话框 -->
  <Modal ref="modalRef" @register="modalForm" @confirm="okModal">
    <el-form ref="dataFormRef" :model="dataForm" :rules="rules" :label-width="80">
      <el-form-item prop="type" label="类型">
        <el-radio-group v-model="dataForm.type">
          <el-radio-button label="菜单" value="1" />
          <el-radio-button label="权限" value="2" />
        </el-radio-group>
      </el-form-item>

      <el-form-item prop="parentId" label="上级">
        <el-input v-model="dataForm.parentId" placeholder="请选择" />
      </el-form-item>

      <el-form-item prop="name" label="名称">
        <el-input v-model="dataForm.name" maxlength="100" placeholder="菜单名称" clearable />
      </el-form-item>

      <el-form-item prop="permission" label="权限">
        <el-input
          v-model="dataForm.permission"
          maxlength="100"
          placeholder="权限标识,如 sys.menu"
          clearable
        />
      </el-form-item>

      <template v-if="dataForm.type === '1'">
        <el-form-item prop="router" label="路由">
          <el-input v-model="dataForm.router" placeholder="请输入路由" clearable />
        </el-form-item>

        <el-form-item prop="path" label="路径">
          <el-input v-model="dataForm.path" placeholder="请输入路径" clearable />
        </el-form-item>

        <el-form-item prop="icon" label="图标">
          <el-input v-model="dataForm.icon" placeholder="请输入图标" clearable />
        </el-form-item>

        <el-form-item prop="sort" label="排序">
          <el-input-number v-model="dataForm.sort" placeholder="请输入" />
        </el-form-item>
      </template>

      <el-form-item prop="status" label="状态">
        <el-radio-group v-model="dataForm.status">
          <el-radio :value="1">正常</el-radio>
          <el-radio :value="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </Modal>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { Modal, useModal } from '@/design/components/Modal';
  import { ElMessage } from 'element-plus';
  import api from '@/api/system/menu';

  // 组件属性
  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    record: {
      type: Object,
      default: () => ({}),
    },
  });

  // 获取表单标题
  const dataFormRef: any = ref(null);
  const record = ref(props.record);

  // 设置默认值
  const defaultValue = ref({
    id: '',
    parentId: '',
    type: '1',
    name: '',
    permission: '',
    router: '',
    path: '',
    icon: '',
    sort: 0,
    status: 1,
  });

  const dataForm = ref({ ...defaultValue.value, ...record.value });

  // 表单规则
  const rules = {
    name: { required: true, message: '请输入菜单名称', trigger: 'blur' },
    permission: { required: true, message: '请输入权限标识', trigger: 'blur' },
    router: { required: true, message: '请输入路由', trigger: 'blur' },
  };

  // 设置弹窗
  const [modalForm, { openModal, closeModal, setSubLoading, setProps }] = useModal({
    title: props.title,
    width: 650,
  });

  // 提交表单
  async function okModal() {
    dataFormRef.value.validate((valid) => {
      if (valid) {
        const { isEdit } = props;
        setSubLoading(true);
        const request = isEdit ? api.update(dataForm) : api.create(dataForm);
        request
          .then(() => {
            const successMessage = isEdit ? '更新成功' : '创建成功';
            ElMessage.success(successMessage);
            setSubLoading(false);
            handleReset();
            closeModal();
          })
          .catch(() => {
            setSubLoading(false);
          });
      } else {
        setSubLoading(false);
      }
    });
  }

  // 重置表单
  function handleReset() {
    dataFormRef.value.resetFields();
  }

  // 监听变化，更新 dataForm
  watch(
    () => props.record,
    (newRecord) => {
      dataForm.value = { ...defaultValue.value, ...newRecord };
    },
  );

  //导出方法
  defineExpose({
    openModal,
    closeModal,
    setProps,
  });
</script>
